<template>
  <div>
    <div class="commontop">
      <div class="commontop-left">
        <el-form :inline="true" :model="pages" :rules="filesForm" ref="forms">
          <el-form-item prop="type">
            <el-select
              class="elSect"
              v-model="pages.type"
              placeholder="请选择要搜索内容"
              clearable
              prefix-icon="el-icon-search"
            >
              <el-option
                v-for="item in optionsTitle"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="keyword">
            <el-input
              class="elInpt"
              v-model="pages.keyword"
              clearable
              prefix-icon="el-icon-search"
              placeholder="标题名称、封面、备考表"
            ></el-input>
          </el-form-item>
          <!--  suffix-icon="iconfont icon-sousuo2" -->
          <el-button
            class="searchbgc"
            @click="SubmitBtnS()"
            icon="iconfont icon-sousuo2"
            >搜索</el-button
          >
          <el-button
            @click="handleClick"
            v-show="xsyc === '1' ? true : false"
            icon="iconfont icon-piliangdaoruyonghu5"
            >添加案卷构成规范</el-button
          >
        </el-form>
        <!--  @focus="dialogForm = true" -->
      </div>
      <div class="commontop-right">
        <el-button
          class="red"
          icon="iconfont icon-shanchu1"
          @click="deleteSelectItem()"
          v-show="xsyc === '1' ? true : false"
          >删除</el-button
        >
      </div>
    </div>
    <el-table
      v-loading="isLoading"
      ref="multipleSelection"
      @selection-change="handleSelectionChange"
      :data="tableData"
      :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="cover_img" label="封面">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a
              :href="scope.row.cover_img"
              target="_blank"
              title="查看最大化图片"
            >
              <img
                :src="scope.row.cover_img"
                style="width: 500px; height: 600px"
              />
            </a>
            <img
              slot="reference"
              :src="scope.row.cover_img"
              style="width: 50px; height: 50px; cursor: pointer"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="appendix_img"
        label="备考表"
        :show-overflow-tooltip="true"
        ><template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a
              :href="scope.row.appendix_img"
              target="_blank"
              title="查看最大化图片"
            >
              <img
                :src="scope.row.appendix_img"
                style="width: 500px; height: 600px"
              />
            </a>
            <img
              slot="reference"
              :src="scope.row.appendix_img"
              style="width: 50px; height: 50px; cursor: pointer"
            />
          </el-popover> </template
      ></el-table-column>
      <el-table-column
        prop="book_title_img"
        label="案卷目录"
        :show-overflow-tooltip="true"
        ><template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a
              :href="scope.row.book_title_img"
              target="_blank"
              title="查看最大化图片"
            >
              <img
                :src="scope.row.book_title_img"
                style="width: 500px; height: 600px"
              />
            </a>
            <img
              slot="reference"
              :src="scope.row.book_title_img"
              style="width: 50px; height: 50px; cursor: pointer"
            />
          </el-popover> </template
      ></el-table-column>
      <el-table-column
        prop="book_catalog_img"
        label="卷内目录"
        :show-overflow-tooltip="true"
        ><template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a
              :href="scope.row.book_catalog_img"
              target="_blank"
              title="查看最大化图片"
            >
              <img
                :src="scope.row.book_catalog_img"
                style="width: 500px; height: 600px"
              />
            </a>
            <img
              slot="reference"
              :src="scope.row.book_catalog_img"
              style="width: 50px; height: 50px; cursor: pointer"
            />
          </el-popover> </template
      ></el-table-column>
      <el-table-column
        prop="catalogue_img"
        label="全引目录"
        :show-overflow-tooltip="true"
        ><template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a
              :href="scope.row.catalogue_img"
              target="_blank"
              title="查看最大化图片"
            >
              <img
                :src="scope.row.catalogue_img"
                style="width: 500px; height: 600px"
              />
            </a>
            <img
              slot="reference"
              :src="scope.row.catalogue_img"
              style="width: 50px; height: 50px; cursor: pointer"
            />
          </el-popover> </template
      ></el-table-column>
      <el-table-column label="操作" width="100px">
        <!-- v-if="scope.row.value1 == true ? true : false" -->
        <template slot-scope="scope">
          <el-button size="mini" class="green" @click="showEdit(scope.row.id)"
            ><i class="el-icon-edit"></i
          ></el-button>
          <el-button
            class="red"
            size="mini"
            @click.native.prevent="deleteRow(scope.row.id)"
            ><i class="el-icon-delete"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="pages.per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      class="tab"
      title="添加案卷构成规范"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form :model="form" :rules="fileForm" ref="form">
        <el-form-item
          label="规范名称"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.title"
            autocomplete="off"
            aria-placeholder="请输入规范名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="封面"
          prop="cover_id"
          :label-width="formLabelWidth"
        >
          <el-select
            clearable
            @change="getCover"
            v-model="form.cover_id"
            placeholder="请选择封面"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!--  <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备考表"
          prop="appendix_id"
          :label-width="formLabelWidth"
        >
          <el-select
            clearable
            @change="getPreparationForm"
            v-model="form.appendix_id"
            placeholder="请选择备考表"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!-- <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="案卷目录"
          prop="book_title_id"
          :label-width="formLabelWidth"
        >
          <el-select
            clearable
            @change="getFile"
            v-model="form.book_title_id"
            placeholder="请选择案卷目录"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!--  <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="卷内目录"
          prop="book_catalog_id"
          :label-width="formLabelWidth"
        >
          <el-select
            clearable
            @change="getInvolume"
            v-model="form.book_catalog_id"
            placeholder="请选择卷内目录"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!--               <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="全引目录"
          prop="catalogue_id"
          :label-width="formLabelWidth"
        >
          <el-select
            clearable
            @change="getFullcitation"
            v-model="form.catalogue_id"
            placeholder="请选择全引目录"
          >
            <el-option
              v-for="item in options4"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!--  <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.sort"
            :min="0"
            :max="99"
            label="描述文字"
          ></el-input-number>
          <p class="tips">选填，排序越高越在前面</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitBtn('form')"
          >提交确定</el-button
        >
        <el-button type="warning" @click="dialogFormVisible = false"
          >暂不添加</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      class="tab"
      title="编辑"
      width="30%"
      :visible.sync="editdialogVisible"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入标题"
            v-model="editForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="封面" :label-width="formLabelWidth">
          <el-select clearable  v-model="editForm.cover_id" placeholder="请选择封面">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item
          label="封面"
          prop="cover_id"
          :label-width="formLabelWidth"
        >
          <el-select
            clearable
            @change="getCover"
            v-model="editForm.cover_id"
            placeholder="请选择封面"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!-- <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备考表" :label-width="formLabelWidth">
          <el-select
            clearable
            v-model="editForm.appendix_id"
            placeholder="请选择备考表"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <!--  <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案卷目录" :label-width="formLabelWidth">
          <el-select
            clearable
            v-model="editForm.book_title_id"
            placeholder="请选择案卷目录"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              ><!-- <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卷内目录" :label-width="formLabelWidth">
          <el-select
            clearable
            v-model="editForm.book_catalog_id"
            placeholder="请选择卷内目录"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              ><!-- <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="全引目录" :label-width="formLabelWidth">
          <el-select
            clearable
            v-model="editForm.catalogue_id"
            placeholder="请选择全引目录"
          >
            <el-option
              v-for="item in options4"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              ><!-- <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover">
                  <a :href="item.thumb" target="_blank" title="查看最大化图片">
                    <img
                      :src="item.thumb"
                      style="width: 500px; height: 600px"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="item.thumb"
                    style="width: 50px; height: 50px; cursor: pointer"
                  />
                </el-popover>
              </template> -->
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="category('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  templates,
  dossierCombinations,
  combinations,
  Seecombinations,
  Modifycombinations,
  delCombinations,
  delCombinationsMore,
} from "../../api/Template/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      /* 表格数据 */
      tableData: [],
      /* 数组 */
      multipleSelection: [],
      /* 页面 */
      pages: {
        per_page: 10,
        page: 1,
        type: "",
        keyword: "",
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,
      total: 0,
      isLoading: true,

      /*  dialogForm: false, */
      /* 选择搜索选择器 */
      optionsTitle: [
        { id: "-1", title: "标题" },
        { id: "2", title: "备考表" },
        { id: "3", title: "案卷目录" },
        { id: "4", title: "卷内目录" },
        { id: "5", title: "全引目录" },
      ],
      /* 搜索表单 */
      filesForm: {
        keyword: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择搜索模块",
            trigger: "blur",
          },
        ],
      },
      //编辑蒙尘
      editdialogVisible: false,
      /* 编辑表单 */
      editForm: {},
      formLabelWidth: "120px",
      //添加案卷构成范围蒙尘
      fileForm: {
        title: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        cover_id: [
          {
            required: true,
            message: "请输入封面",
            trigger: "blur",
          },
        ],
        appendix_id: [
          {
            required: true,
            message: "请输入备考表",
            trigger: "blur",
          },
        ],
        book_title_id: [
          {
            required: true,
            message: "请输入案卷封面",
            trigger: "blur",
          },
        ],
        book_catalog_id: [
          {
            required: true,
            message: "请输入卷内目录",
            trigger: "blur",
          },
        ],
        catalogue_id: [
          {
            required: true,
            message: "请输入全引目录",
            trigger: "blur",
          },
        ],
      },
      /* 添加案卷规范模板蒙尘 */
      dialogFormVisible: false,
      /* 添加案卷规范表单 */
      form: {
        title: "",
        cover_id: "",
        appendix_id: "",
        book_title_id: "",
        book_catalog_id: "",
        catalogue_id: "",
        sort: "",
      },
      /* 区分各个页面 */
      op: 1,
      op1: 2,
      op2: 3,
      op3: 4,
      op4: 5,

      options: [],
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      formLabelWidth: "120px",
    };
  },
  methods: {
    //表格
    async loadData(num) {
      let res = await dossierCombinations(num);
      console.log(res, "112233");
      if (res.data.code === 200) {
        this.tableData = res.data.data.data;
        console.log(this.tableData);
        this.total = res.data.data.total;
        this.per_page = res.data.data.per_page;
        this.current_page = res.data.data.current_page;
      }
      this.isLoading = false;
    },
    //获取封面
    async GetCover() {
      let type = this.op;
      let res = await templates({ type });
      console.log("res1", res);
      this.options = res.data.data.data;
    },
    getCover(val) {
      console.log();
      this.options.map((item) => {
        if (item.value === val) {
          this.form.cover_id = item.id;
        }
      });
    },

    //获取备考表
    async GetReference() {
      let type = this.op1;
      let res = await templates({ type });
      console.log(res);
      this.options1 = res.data.data.data;
    },
    getPreparationForm(val) {
      this.options1.map((item) => {
        if (item.value === val) {
          this.form.appendix_id = item.id;
        }
      });
    },
    //获取案卷目录
    async Getfile() {
      let type = this.op2;
      let res = await templates({ type });
      console.log(res);
      this.options2 = res.data.data.data;
    },
    getFile(val) {
      this.options2.map((item) => {
        if (item.value === val) {
          this.form.book_title_id = item.id;
        }
      });
    },
    //获取卷内目录
    async GetVolume() {
      let type = this.op3;
      let res = await templates({ type });
      console.log(res);
      this.options3 = res.data.data.data;
    },
    getInvolume(val) {
      this.options3.map((item) => {
        if (item.value === val) {
          this.form.book_catalog_id = item.id;
        }
      });
    },
    //获取全引目录
    async GetCitation() {
      let type = this.op4;
      let res = await templates({ type });
      console.log(res);
      this.options4 = res.data.data.data;
    },
    getFullcitation(val) {
      this.options4.map((item) => {
        if (item.value === val) {
          this.form.catalogue_id = item.id;
        }
      });
    },

    //提交选择模块
    async SubmitBtnS() {
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      if (this.pages.type == "") {
        this.pages.type = -1;
        let res = await dossierCombinations(this.pages);
        console.log(res);
        this.tableData = res.data.data.data;
      } else {
        let res = await dossierCombinations(this.pages);
        console.log(res);
        this.tableData = res.data.data.data;
      }
    },
    //提交案卷构成规范
    SubmitBtn(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await combinations(this.form);
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //显示添加组合
    handleClick() {
      this.dialogFormVisible = true;
      this.GetCover();
      this.GetReference();
      this.Getfile();
      this.GetVolume();
      this.GetCitation();
    },
    //数据自加减
    handleChange(value) {
      console.log(value);
    },
    //编辑
    async showEdit(id) {
      let res = await Seecombinations({ id });
      console.log(res);
      this.editForm = res.data.data;
      this.editdialogVisible = true;
      this.GetCover();
      this.GetReference();
      this.Getfile();
      this.GetVolume();
      this.GetCitation();
    },
    //编辑确定
    category(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await Modifycombinations(this.editForm);
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.editdialogVisible = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除
    deleteRow(id) {
      this.$confirm("确认删除？")
        .then(async (_) => {
          let res = await delCombinations({ id });
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {
          this.$message({
            showClose: true,
            duration: 3000,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //多选删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    deleteSelectItem() {
      //console.log(this.multipleSelection);
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          duration: 3000,

          message: "请先选中要删除的成员哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let arr = this.multipleSelection.map((item) => item.id);
          let ids = arr.join(",");
          let res = await delCombinationsMore({ ids });
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        });
      }
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
  },
  created() {
    /*  this.GetCover();
    this.GetReference();
    this.Getfile();
    this.GetVolume();
    this.GetCitation(); */
    this.loadData();
  },
};
</script>

<style scoped lang="less">
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 18px !important;
}
.dialog-footer {
  text-align: center;
  .el-button {
    margin: 0 20px;
  }
}
.el-button--mini {
  padding: 7px 5px;
}
/deep/.tab .el-select {
  width: 100%;
}
.commontop-left {
  display: flex;
}
/deep/.commontop-left .elSect .el-input {
  width: 100%;
}
/deep/.commontop-left .el-form-item {
  margin-bottom: 0px;
}
/deep/.elInpt {
  width: 100% !important;
}
</style>